<template>
  <div>
    <!-- <div class="top-title" v-if="topTitle">{{ topTitle }}</div> -->
    <div
      class="chart-box"
      ref="chart"
      :style="{ width: width + 'px', height: height + 'px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    topInfo: {
      type: Object
    },
    keyVal: {
      type: String
    },
    chartsData: {
      type: Object
    },
    width: {
      type: String,
      default: "300"
    },
    height: {
      type: String,
      default: "300"
    },
    title: {
      type: String
    },
    topTitle: {
      type: String
    }
  },
  data() {
    return {
      chart: null
    };
  },
  computed: {
    chartsOption() {
      return {
        title: {
          text: this.topTitle
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.chartsData.xData,
          axisLabel: { rotate: 35 }
        },
        color: ["#0AB2C1", "#65B581"],
        yAxis: {
          type: "value"
        },
        dataZoom: [
          {
            type: "slider",
            show: this.chartsData.xData.length > 8 ? true : false,
            start: 0,
            end: this.chartsData.xData.length > 8 ? 60 : 100,
            handleSize: 8,
            handleStyle: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            data: this.chartsData.yData,
            type: "bar",
            barWidth: 14, // 设置每个柱子的宽度为40
            markLine:
              this.topTitle === "盈亏（万元）"
                ? null
                : {
                    // 标记线
                    data: [
                      {
                        // type: "average",
                        yAxis: this.getNum(),
                        name: "平均值"
                      }
                    ]
                  }
          }
        ]
      };
    }
  },
  watch: {
    chartsData: {
      immediate: true, //初始化时让handler调用一下
      deep: true, // 开启深度监听
      handler() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.initEcharts();
          }, 500);
        });
      }
    }
  },
  mounted() {},
  methods: {
    getNum() {
      const infos = this.topInfo || localStorage.getItem("staticInfo");
      if (!infos) return 0;
      //-------------------1
      if (
        this.topTitle === "费用消耗指数" ||
        this.topTitle === "时间消耗指数"
      ) {
        return 1;
      }
      //-------------------
      return this.topTitle === "盈亏（万元）"
        ? /* (infos["平均盈亏"] / 10000).toFixed(2) */ 0
        : this.topTitle === "科室总权重"
        ? infos["平均权重"]
        : infos[this.topTitle];
    },
    //初始化图表
    initEcharts() {
      let myChart = echarts.init(this.$refs.chart);
      myChart.setOption(this.chartsOption);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.top-title {
  text-align: center;
  margin-top: 20px;
}
.chart-box {
  margin-top: 20px;
}
</style>
